fix(TMCU-1046): remove useElevatedSurface shim from onboarding BottomSheets#33161
fix(TMCU-1046): remove useElevatedSurface shim from onboarding BottomSheets#33161georgewrmarshall wants to merge 1 commit into
Conversation
…Sheets MMDS BottomSheet now handles pure-black elevated surface internally. Remove redundant useElevatedSurface() calls from OnboardingSheet and SelectSRPBottomSheet. Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
metamask-ci
Bot
added
the
team-design-system
🔍 Smart E2E Test Selection
click to see 🤖 AI reasoning detailsE2E Test Selection:
The changes are styling-only — no logic, navigation, callbacks, or data flow is modified. The Performance Test Selection: |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Pure-black sheet loses elevation
- Reintroduced useElevatedSurface() and twClassName on both onboarding BottomSheets to restore elevated bg-alternative styling in pure-black dark mode.
Or push these changes by commenting:
@cursor push 6dac7eac86
Preview (6dac7eac86)
diff --git a/app/components/Views/OnboardingSheet/index.tsx b/app/components/Views/OnboardingSheet/index.tsx
--- a/app/components/Views/OnboardingSheet/index.tsx
+++ b/app/components/Views/OnboardingSheet/index.tsx
@@ -30,6 +30,7 @@
BottomSheetRef,
} from '@metamask/design-system-react-native';
import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { useElevatedSurface } from '../../../util/theme/themeUtils';
export interface OnboardingSheetParams {
onPressCreate?: () => void;
@@ -59,6 +60,7 @@
} = params ?? {};
const { colors, themeAppearance } = useTheme();
const tw = useTailwind();
+ const surfaceClass = useElevatedSurface();
const onPressCreateAction = () => {
if (onPressCreate) {
onPressCreate();
@@ -112,7 +114,7 @@
const isDark = themeAppearance === AppThemeKey.dark;
return (
- <BottomSheet goBack={navigation.goBack} ref={sheetRef}>
+ <BottomSheet goBack={navigation.goBack} ref={sheetRef} twClassName={surfaceClass}>
<Box
flexDirection={BoxFlexDirection.Column}
alignItems={BoxAlignItems.Center}
diff --git a/app/components/Views/SelectSRP/SelectSRPBottomSheet.tsx b/app/components/Views/SelectSRP/SelectSRPBottomSheet.tsx
--- a/app/components/Views/SelectSRP/SelectSRPBottomSheet.tsx
+++ b/app/components/Views/SelectSRP/SelectSRPBottomSheet.tsx
@@ -11,16 +11,18 @@
import { strings } from '../../../../locales/i18n';
import { SelectSRPBottomSheetTestIds } from './SelectSRPBottomSheet.testIds';
import { goBackIfFocused } from './SelectSRPBottomSheet.utils';
+import { useElevatedSurface } from '../../../util/theme/themeUtils';
export const SelectSRPBottomSheet = () => {
const bottomSheetRef = useRef<BottomSheetRef>(null);
const navigation = useNavigation();
+ const surfaceClass = useElevatedSurface();
const goBack = useCallback(() => {
goBackIfFocused(navigation);
}, [navigation]);
return (
- <BottomSheet ref={bottomSheetRef} goBack={goBack}>
+ <BottomSheet ref={bottomSheetRef} goBack={goBack} twClassName={surfaceClass}>
<BottomSheetHeader
onBack={goBack}
backButtonProps={{You can send follow-ups to the cloud agent here.
Reviewed by Cursor Bugbot for commit 5337b2d. Configure here.
|
| ref={sheetRef} | ||
| twClassName={surfaceClass} | ||
| > | ||
| <BottomSheet goBack={navigation.goBack} ref={sheetRef}> |
There was a problem hiding this comment.
MMDS BottomSheetDialog applies elevated surface styling internally since design-system-react-native 0.33, so the useElevatedSurface twClassName shim is no longer needed on onboarding sheets. SelectSRPBottomSheet follows the same pattern in this PR.
2 participants
Description
MMDS
BottomSheetnow handles pure-black elevated surface styling internally. This PR removes the redundantuseElevatedSurface()shim from the onboarding-related BottomSheet callsites scoped to @MetaMask/web3auth.Changes:
app/components/Views/OnboardingSheet/index.tsx— removeduseElevatedSurfaceimport,surfaceClassvariable, andtwClassNameprop fromBottomSheet; consolidated duplicateuseTheme()callsapp/components/Views/SelectSRP/SelectSRPBottomSheet.tsx— removeduseElevatedSurfaceimport,surfaceClassvariable, andtwClassNameprop fromBottomSheetChangelog
CHANGELOG entry: null
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-1046
Manual testing steps
N/A — internal styling cleanup with no user-facing behavior change. MMDS
BottomSheetnow applies the elevated surface class internally. Unit tests pass for both modified components.Screenshots/Recordings
N/A — no visual change expected; pure-black elevated surface is now handled by MMDS
BottomSheetinternally.Before
N/A
After
N/A
Pre-merge author checklist
Performance checks (if applicable)
trace()for usage andaddTokenfor an examplePre-merge reviewer checklist